import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { cn } from '@/lib/utils';
import useEditorStore from '@/store/use-editor-store';
import { ListCollapseIcon } from 'lucide-react';

const LineHeightButton = () => {
  const editor = useEditorStore((state) => state.editor);

  const lineHeights = [
    {
      label: 'Default',
      value: 'normal',
    },
    {
      label: 'Single',
      value: '1',
    },
    {
      label: '1.15',
      value: '1.15',
    },
    {
      label: '1.5',
      value: '1.5',
    },
    {
      label: 'Double',
      value: '2',
    },
  ];

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant={'ghost'}
          size={'icon'}
          className="h-7 shrink-0 flex items-center justify-between rounded-sm hover:bg-neutral-200/80 px-1.5 overflow-hidden text-sm"
        >
          <ListCollapseIcon className="size-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="fle flex-col gap-y-1">
        {lineHeights.map(({ label, value }) => (
          <Button
            key={value}
            variant={'ghost'}
            onClick={() => {
              editor?.chain().focus().setLineHeight(value).run();
            }}
            className={cn(
              'flex items-center px-2 py-1 gap-x-2 rounded-sm hover:bg-neutral-200/80',
              editor?.getAttributes('paragraph').lineHeight === value && 'bg-neutral-200/80'
            )}
          >
            <span className="text-sm">{label}</span>
          </Button>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default LineHeightButton;
